<template>
    <div  class="page-header" :style="dynStyle">
        <h1 class="system_title">圖控平台</h1>
      <!-- <el-menu :default-active="activeIndex" class="page-header-menu" mode="horizontal" @select="handleSelect" text-color="#fff" active-text-colorr="#fff">
        <el-submenu index="2">
            <template slot="title">执行页面</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="3">消息中心</el-menu-item>
      </el-menu> -->
      
      <div class="user_info">
        <span>当前登录用户：</span><span>{{user.name}}</span>
      </div>
      <!--颜色风格选择器-->
        <el-dropdown class="choose_style">
          <div class="style_box" :style="curSyle"></div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in styleList" :key="item.id" :class="item.class">
              <span  @click="changeStyle(item.type)">{{item.label}}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>
<script>
 export default {
    props:['user'],
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        styleList:[
          {
            id:1,
            label:'深藍風格',
            type:'blue',
            class:''
          },
          {
            id:2,
            label:'暗灰風格',
            type:'grey',
            class:''
          },
        ]
      };
    },
    computed:{
      globalUI:function(){
        return this.$store.getters.getCurStyle;
      },
      dynStyle:function(){
        let top = this.$store.getters.getCurStyle.top;
        let img = 'url('+require('../../assets/UI/'+this.globalUI.styleType+'/page_top_bg.png')+')no-repeat center/100%';
        top.background = img
        return top
      },
      curSyle(){
        let curStyle = this.$store.getters.getCurStyle;
        let bg = this.globalUI.backgroundColor;
        return {'backgroundColor':bg}
      }
    },
    mounted(){
      let getCurStyle = this.$store.getters.getCurStyle;
      let curType = getCurStyle.styleType;
      this.styleList.forEach(item =>{
        if(item.type == curType){
          item.class = 'alive'
        }else{
          item.class = ''
        }
      })
    },
    // mounted(){
    //   let bodyHei = document.body.clientHeight;
    //   let designedUI= this.$store.state.design.pageJson;
    //   if(designedUI.header.height){
    //     this.stateHeaderHei =  (designedUI.header.heiper*bodyHei/100).toFixed(2)+'px'
    //   }else{
    //     let globalUI= this.$store.state.app.globalUI;
    //     this.stateHeaderHei =  globalUI.pageHeaderHei
    //   }
    // },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath); 
      },
      changeStyle(type){
        this.$store.commit('setGlobalUI',{'styleType':type})
        this.styleList.forEach(item =>{
          if(item.type == type){
            item.class = 'alive'
          }else{
            item.class = ''
          }
        })
      }
    }
  }
</script>
<style scoped>
    .page-header{
        width:100%;
        background:url('../../assets/UI/blue/page_top_bg.png')no-repeat center/100%;
        background-size:100% 100%;
        height: 60px;
        padding-right:40px;
        box-sizing: border-box;
    }
    
    .page-header .system_title{
      color:#fff;
      font-size: 34px;
      line-height: 73px;
      float: left;
      margin-left:50px;
    }
    .page-header .el-radio-group{
       position:absolute;
       top:50%;
       transform: translateY(-50%);
       left:250px;
    }
    .page-header .el-radio-button__orig-radio:checked+.el-radio-button__inner{
        background-color: #011B36;
    }
    .el-radio-button    .el-radio-button__orig-radio:checked+.el-radio-button__inner{
        color:#011B36
    }
    .page-header-menu{
        width:50%;
        display: inline-block;
        background-color: rgba(12,57,96,0.6);
        border-bottom:0;
    }
    .page-header-menu .el-menu.el-menu--horizontal{
        border-bottom: 0;
    }
    .user_info{
      font-size:14px;
      color:#fff;
      float:right;
      line-height: 60px;
    }
    .choose_style{
      width: 28px;
      height: 28px;
      float:right;
      margin-top: 18px;
      border:1px solid #999;
      border-radius: 5px;
      margin-right:30px;
      padding: 2px;
      box-sizing: border-box;
    }
     .choose_style .style_box{
       background-color: #fff;
       width: 100%;
       height: 100%;
     }
    .el-dropdown-menu .alive{
        background-color: rgb(240, 247, 254);
    color: rgb(136, 191, 247);
      }
</style>
